<script>
export default {
  name: "IndexView",
  data() {
    return {
      recipeArr: [
        {
          "id": 27,
          "title": "家常面包",
          "imgUrl": "/imgs/a.jpg",
          "categoryName": "面包",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
        {
          "id": 18,
          "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
          "imgUrl": "/imgs/b.jpg",
          "categoryName": "家常菜",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
        {
          "id": 17,
          "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
          "imgUrl": "/imgs/c.jpg",
          "categoryName": "小食",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
        {
          "id": 16,
          "title": "蔓越莓绿豆糕，味道还不错值得一试!",
          "imgUrl": "/imgs/d.jpg",
          "categoryName": "面包",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
      ]
    }
  }
}
</script>

<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel height="350px">
      <el-carousel-item><img src="/imgs/banner1.jpg" width="100%"></el-carousel-item>
      <el-carousel-item><img src="/imgs/banner2.jpg" width="100%"></el-carousel-item>
      <el-carousel-item><img src="/imgs/banner3.jpg" width="100%"></el-carousel-item>
    </el-carousel>
    <!--  烘焙食谱导航条开始    -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size:20px;margin: 15px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item index="1">面包</el-menu-item>
          <el-menu-item index="2">小食</el-menu-item>
          <el-menu-item index="3">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  烘焙食谱导航条结束    -->
    <!--  烘焙食谱内容开始     -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in recipeArr" style="margin: 10px 0">
        <el-card>
            <img :src="item.imgUrl" width="100%" height="145">
            <p style="height: 40px">{{item.title}}</p>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">
              {{item.nickName}}
            </el-col>
            <el-col :span="10">
              <span style="float: right">{{item.categoryName}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--  烘焙食谱内容结束    -->
    <div style="text-align: center ;margin: 0px 0px 10px 0px" >
      <el-button>点击加载更多</el-button>
    </div>
    <!--  烘焙视频导航条开始    -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size:20px;margin: 15px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item index="1">面包教学</el-menu-item>
          <el-menu-item index="2">零食鉴赏</el-menu-item>
          <el-menu-item index="3">家常菜教程</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  烘焙视频导航条结束    -->
    <!--  烘焙视频内容开始     -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in recipeArr" style="margin: 10px 0">
        <el-card>
          <img :src="item.imgUrl" width="100%" height="145">
          <p style="height: 40px">{{item.title}}</p>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">
              {{item.nickName}}
            </el-col>
            <el-col :span="10">
              <span style="float: right">{{item.categoryName}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--  烘焙视频内容结束    -->
    <div style="text-align: center ;margin: 0px 0px 10px 0px" >
      <el-button>点击加载更多</el-button>
    </div>
    <!--  行业资讯导航条开始    -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size:20px;margin: 15px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item index="1">美食资讯</el-menu-item>
          <el-menu-item index="2">商家资讯</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  行业资讯导航条结束    -->
    <!--  行业资讯内容开始     -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in recipeArr" style="margin: 10px 0">
        <el-card>
          <img :src="item.imgUrl" width="100%" height="145">
          <p style="height: 40px">{{item.title}}</p>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">
              {{item.nickName}}
            </el-col>
            <el-col :span="10">
              <span style="float: right">{{item.categoryName}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--  行业资讯内容结束    -->
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>